<template>
    <div style="background: #eeeff3;">
        <div class="navbar">
            <!-- 导航栏内容 -->
            <div class="menu">
                <div class="menu-scroll">
                    <div v-for="(m, i) in menus" :key="m" :class="['menu-item', i === activeIndex && 'active']"
                         @click="activeIndex = i" @tap="switchTab">
                        {{ m }}
                    </div>
                </div>
                <div v-if="visible" class="modal"/>
            </div>
        </div>
        <div v-if="activeIndex === 0" class="content">
            <div class="padding">
                <div style="margin-bottom: 10px">
                    <el-input v-model="searchName" placeholder="巡检人员"
                              style="width: 80%;height: 33px;margin-right: 15px;font-size: 13px;background: #fff" clearable></el-input>
                    <el-button icon="Search" type="primary"
                               style="width: 15%;color: #fff;font-size: 12px;background-color: #1890ff;"
                               @click="load">搜索
                    </el-button>
                </div>
                <div v-for="data in tableData" :key="data.id" class="card" @click="editItem(data)">
                    <div class="card-header">
                        <div class="title">{{ data.clientName }}</div>
                        <div class="status" :class="data.state !== '1' ? 'success' : 'warning'">
                            {{ data.stateName }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="info-row">
                            <div class="cell-item">
                                <el-icon style="color: #333;">
                                    <Calendar />
                                </el-icon>
                                <text class="info-text">{{ data.dateTime }}</text>
                            </div>
                        </div>
                        <div class="info-row">
                            <div class="cell-item">
                                <span class="iconfont icon-ziyuan" style="color: #333">
                                    <text class="info-text">{{ data.information }}</text>
                                </span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="activeIndex === 1" class="content">
            <div class="padding">
                <div style="margin-bottom: 10px">
                    <el-input v-model="searchName" placeholder="维保人员"
                              style="width: 80%;height: 33px;margin-right: 15px;font-size: 13px;background: #fff" clearable></el-input>
                    <el-button icon="Search" type="primary"
                               style="width: 15%;color: #fff;font-size: 12px;background-color: #1890ff;"
                               @click="load1">搜索
                    </el-button>
                </div>
                <div v-for="data in tableData1" :key="data.id" class="card" @click="editItem(data)">
                    <div class="card-header">
                        <div class="title">{{ data.clientName }}</div>
                        <div class="status" :class="data.state === '0' ? 'success' : 'warning'">
                            {{ data.stateName }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="info-row">
                            <div class="cell-item">
                                <el-icon  style="color: #333;">
                                    <Calendar />
                                </el-icon>
                                <text class="info-text">{{ data.dateTime }}</text>
                            </div>

                        </div>
                        <div class="info-row">
                            <div class="cell-item">
                                <span class="iconfont icon-ziyuan" style="color: #333;">
                                    <text class="info-text">{{ data.information }}</text>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="巡检记录操作" v-model="operationItemDialog1" :show-close="false"
               width="80%" style="background: #fff">
        <el-form :inline="true" :model="form" ref="form" :rules="rules">
            <el-form-item label="单位名称" prop="clientId">
                <el-input disabled placeholder="选择单位名称" v-model="form.clientName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检人员" prop="userName">
                <el-input disabled placeholder="请输入巡检人员" v-model="form.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检地址" prop="address">
                <el-input disabled placeholder="选择巡检地址" v-model="form.addrName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检电话" prop="telephone">
                <el-input disabled placeholder="请输入巡检电话" v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检时间" prop="dateTime">
                <el-input disabled placeholder="选择日期时间" v-model="form.dateTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检状态" prop="state">
                <el-select disabled
                        v-model="form.state"
                        placeholder="请选择巡检状态"
                        style="width: 210px"
                >
                    <el-option
                            v-for="item in stateOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="问题简述" prop="hiddenDanger">
                <el-input disabled placeholder="请输入问题简述" v-model="form.hiddenDanger" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="width: 90%" label="巡检信息" prop="information">
                <el-input disabled type="textarea" placeholder="请输入巡检信息" v-model="form.information"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="巡检图片" prop="informationPhoto" style="width: 100%" class="formItem">
                <el-upload
                        disabled
                        :on-error="photoHandleError"
                        :action="'/api/files/upload'"
                        :on-success="informationPhotoUpload"
                        list-type="picture-card"
                        :file-list="informationPhotoList"
                >
                    <template #tip>
                        <div class="el-upload__tip">
                            {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                        </div>
                    </template>
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                </span>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="单位电话" prop="clientTelephone">
                <el-input disabled v-model="form.clientTelephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="width: 95%" label="检查时间" prop="resultTime">
                <el-date-picker
                        v-model="form.resultTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="width: 90%" label="检查结果" prop="result">
                <el-input type="textarea" placeholder="请输入检查结果" v-model="form.result"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查图片" prop="resultPhoto" style="width: 100%" class="formItem">
                <el-upload
                        :on-error="photoHandleError"
                        :action="'/api/files/upload'"
                        :on-success="resultPhotoUpload"
                        list-type="picture-card"
                        :file-list="resultPhotoList"
                >
                    <template #tip>
                        <div class="el-upload__tip">
                            {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                        </div>
                    </template>
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove2(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="reset('form')">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="维保记录操作" v-model="operationItemDialog2" :show-close="false"
               width="80%" style="background: #fff">
        <el-form :inline="true" :model="form" ref="form" :rules="rules">
            <el-form-item label="单位名称" prop="clientId">
                <el-input disabled placeholder="选择单位名称" v-model="form.clientName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保单位名称" prop="mainClientName">
                <el-input disabled placeholder="请输入维保单位名称" v-model="form.mainClientName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保人员" prop="userName">
                <el-input disabled placeholder="请输入维保人员" v-model="form.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保地址" prop="address">
                <el-input disabled placeholder="选择维保地址" v-model="form.addrName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保电话" prop="telephone">
                <el-input disabled placeholder="请输入维保电话" v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保时间" prop="dateTime">
                <el-input disabled placeholder="选择日期时间" v-model="form.dateTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保状态" prop="state">
                <el-select disabled
                           v-model="form.state"
                           placeholder="请选择维保状态"
                           style="width: 210px"
                >
                    <el-option
                            v-for="item in stateOptions1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="巡检问题简述" prop="hiddenDanger">
                <el-input disabled v-model="form.hiddenDanger" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="width: 90%" label="维保信息" prop="information">
                <el-input disabled type="textarea" placeholder="请输入维保信息" v-model="form.information"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维保图片" prop="informationPhoto" style="width: 100%" class="formItem">
                <el-upload
                        disabled
                        :on-error="photoHandleError"
                        :action="'/api/files/upload'"
                        :on-success="informationPhotoUpload"
                        list-type="picture-card"
                        :file-list="informationPhotoList"
                >
                    <template #tip>
                        <div class="el-upload__tip">
                            {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                        </div>
                    </template>
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                </span>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="单位电话" prop="clientTelephone">
                <el-input disabled v-model="form.clientTelephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="width: 95%" label="检查时间" prop="resultTime">
                <el-date-picker
                        v-model="form.resultTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="width: 90%" label="检查结果" prop="result">
                <el-input type="textarea" placeholder="请输入检查结果" v-model="form.result"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查图片" prop="resultPhoto" style="width: 100%" class="formItem">
                <el-upload
                        :on-error="photoHandleError"
                        :action="'/api/files/upload'"
                        :on-success="resultPhotoUpload"
                        list-type="picture-card"
                        :file-list="resultPhotoList"
                >
                    <template #tip>
                        <div class="el-upload__tip">
                            {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                        </div>
                    </template>
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove2(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="reset('form')">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
    <div v-if="dialogVisible" class="modal" @click="closeModal">
        <div class="modal-content" @click.stop>
            <!-- Close button -->
            <button class="close-btn" @click="closeModal">X</button>
            <img :src="dialogImageUrl" alt="" class="enlarged-image" :style="{ transform: 'scale(' + zoomLevel + ')'}" @wheel="handleZoom">
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import {serverIp} from "../../../public/static/config"
    import {fileSizeLimit, photoType} from "@/assets/globalJS.js";
    import {Delete, Download, Iphone, Plus, Position, ZoomIn} from "@element-plus/icons-vue";
    export default {
        name: "AddrCodeAbout",
        components: {Plus, Delete, Download, ZoomIn, Iphone, Position},
        data() {
            return {
                zoomLevel: 1,  // Initial zoom level
                serverIp,
                dialogImportVisible: false,
                operationItemDialog1: false,
                operationItemDialog2: false,
                stateOptions:[
                    {
                        value:"0",
                        label:"无隐患"
                    },{
                        value:"1",
                        label:"有隐患"
                    },{
                        value:"2",
                        label:"已排除"
                    }],
                stateOptions1:[
                    {
                        value:"0",
                        label:"已维保"
                    },{
                        value:"1",
                        label:"未维保"
                    }],
                informationPhotoList: [],
                resultPhotoList: [],
                dialogImageUrl: "",
                dialogVisible: false,
                menus: ["巡检", "维保"],
                activeIndex: 0,
                visible: false,
                id: this.$route.query.id,
                searchName: '',
                form: {},
                tableData: [],
                tableData1: [],
                pageNum: 1,
                pageSize: 10,
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
            this.load1()
        },
        methods: {
            load() {
                console.log(this.id)
                request.get("/record-inspection/getDataByAddr?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&keyWord=" + this.searchName +
                    "&id=" + this.id).then(res => {
                    if (res.code === '200') {
                        this.tableData = res.data;
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].state === "0") {
                                this.tableData[i].stateName = "无隐患";
                            } else if (this.tableData[i].state === "1") {
                                this.tableData[i].stateName = "有隐患";
                            } else if (this.tableData[i].state === "2") {
                                this.tableData[i].stateName = "已排除";
                            }
                        }
                    }
                })
            },
            load1() {
                console.log(this.id)
                request.get("/record-maintenance/getDataByAddr?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&keyWord=" + this.searchName +
                    "&id=" + this.id).then(res => {
                    if (res.code === '200') {
                        this.tableData1 = res.data;
                        for (let i = 0; i < this.tableData1.length; i++) {
                            if (this.tableData1[i].state === "0") {
                                this.tableData1[i].stateName = "已维保";
                            } else if (this.tableData1[i].state === "1") {
                                this.tableData1[i].stateName = "未维保";
                            }
                        }
                    }
                })
            },
            editItem(data) {
                Object.assign(this.form, data)
                if (this.activeIndex === 0) {
                    this.operationItemDialog1 = true
                } else {
                    this.operationItemDialog2 = true
                }
                this.initinformationPhotoList()
                this.initresultPhotoList()
            },
            // 编辑、新增确定按钮
            submitForm(val) {
                if(this.activeIndex === 0) {
                    this.$refs[val].validate((valid) => {
                        if (valid) {
                            request.post("/record-inspection/edit", this.form).then(res => {
                                if (res.code === '200') {
                                    this.$message({
                                        message: "成功",
                                        type: "success"
                                    })
                                    this.load()
                                    this.reset("form")
                                } else {
                                    this.$message.error("操作失败" + res.msg)
                                }
                            })
                        }
                    })
                } else if (this.activeIndex === 1) {
                    this.$refs[val].validate((valid) => {
                        if (valid) {
                            request.post("/record-maintenance/edit", this.form).then(res => {
                                if (res.code === '200') {
                                    this.$message({
                                        message: "成功",
                                        type: "success"
                                    })
                                    this.load1()
                                    this.reset("form")
                                } else {
                                    this.$message.error("操作失败" + res.msg)
                                }
                            })
                        }
                    })
                }
            },
            reset(val) {
                if (this.activeIndex === 0) {
                    this.operationItemDialog1 = false
                } else {
                    this.operationItemDialog2 = false
                }
                this.form = {};
                this.$refs[val].clearValidate();
            },
            photoType() {
                return photoType
            },
            fileSizeLimit() {
                return fileSizeLimit
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove1(file) {
                const index = this.informationPhotoList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.informationPhoto.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.informationPhoto = images.join(','); // 更新 pointMap 字符串
                    this.informationPhotoList.splice(index, 1);
                }
            },
            photoHandleError() {
                this.$message.error("上传文件大小请勿超过" + fileSizeLimit)
            },
            informationPhotoUpload(response) {
                // this.pointMapList = this.form.pointMap.split(',');

                if (this.informationPhotoList.length === 0) {
                    this.form.informationPhoto = `/api/file/download${response}`
                } else {
                    this.form.informationPhoto = this.form.informationPhoto + `,/api/file/download${response}`
                }
                this.initinformationPhotoList()
                console.log(this.informationPhotoList)
                console.log(this.form.informationPhoto)
            },
            initinformationPhotoList() {
                this.informationPhotoList = this.form.informationPhoto ? this.form.informationPhoto.split(',').map(url => {
                    return {url}
                }) : [];
            },
            handleRemove2(file) {
                const index = this.resultPhotoList.indexOf(file);
                if (index !== -1) {
                    const images = this.form.resultPhoto.split(',');
                    images.splice(index, 1); // 删除选中的图片
                    this.form.resultPhoto = images.join(','); // 更新 pointMap 字符串
                    this.resultPhotoList.splice(index, 1);
                }
            },
            resultPhotoUpload(response) {
                // this.pointMapList = this.form.pointMap.split(',');

                if (this.resultPhotoList.length === 0) {
                    this.form.resultPhoto = `/api/file/download${response}`
                } else {
                    this.form.resultPhoto = this.form.resultPhoto + `,/api/file/download${response}`
                }
                this.initresultPhotoList()
                console.log(this.resultPhotoList)
                console.log(this.form.resultPhoto)
            },
            initresultPhotoList() {
                this.resultPhotoList = this.form.resultPhoto ? this.form.resultPhoto.split(',').map(url => {
                    return {url}
                }) : [];
            },
            closeModal() {
                this.dialogImageUrl = ''
                this.dialogVisible = false
                this.zoomLevel = 1; // 重置缩放级别
            },
            handleZoom(event) {
                event.preventDefault(); // 防止页面滚动

                // 根据滚轮方向调整缩放级别
                if (event.deltaY < 0) {
                    this.zoomLevel = Math.min(this.zoomLevel + 0.1, 3); // 最大缩放到3倍
                } else {
                    this.zoomLevel = Math.max(this.zoomLevel - 0.1, 1); // 最小缩放到1倍
                }
            },
        }
    }
</script>

<style scoped>
    .navbar {
        position: sticky;
        z-index: 99;
        top: 0;
        background-color: #f8f8f8;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .menu-bar {
        position: relative;
        z-index: 10;
    }

    .menu {
        text-align: center;
        display: flex;
        width: 100%;
        height: 70px;
        padding: 16px 12px 12px 10px;
        background-color: #fff;
        box-sizing: border-box;
    }

    .menu .menu-scroll {
        display: flex;
        width: 100%;
        /* overflow-x: scroll; */
    }

    .menu-item {
        width: 50%;
        padding: 0 12px;
        flex-shrink: 0;
        font-size: 16px;
        color: #333;
        cursor: pointer;
    }

    .menu-item.active {
        color: #478CF6;
        font-weight: 700;
        border-bottom: 2px solid #478CF6;
    }

    .cell-item{
        width: 100%;
    }

    .modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .content {
        background-color: var(--bg-color);
    }

    .padding {
        padding: 10px 15px; /* 内边距 */
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
    }

    .status {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 20px;
        font-weight: 500;
        color: #fff;
    }

    .success {
        background-color: #52c41a;
    }

    .warning {
        background-color: #fa541c;
    }

    .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .icon-box {
        width: 32px;
        height: 32px;
        background-color: #f4f4f4;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
    }

    .info-text {
        margin-left: 10px;
        font-size: 18px;
        color: #666;
    }
    .card {
        margin-bottom: 20px;
        padding: 24px;
        border-radius: 16px;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;

    &
    :hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* 使用视口宽度 */
        height: 100vh; /* 使用视口高度 */
        background-color: rgba(0, 0, 0, 0.9); /* 更深的半透明背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9000; /* 确保弹窗在最上层 */
    }
    .modal-content {
        position: relative; /* 相对定位，用于定位关闭按钮 */
        width: 100%; /* 弹窗内容宽度为100% */
        height: 100%; /* 弹窗内容高度为100% */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .close-btn {
        z-index: 9999;
        position: absolute;
        top: 20px; /* 离顶部距离 */
        right: 20px; /* 离右侧距离 */
        background-color: transparent; /* 背景透明 */
        border: none;
        font-size: 24px; /* 字体大小 */
        cursor: pointer;
        color: red; /* 关闭按钮颜色 */
    }

    .close-btn:hover {
        color: red; /* 鼠标悬停时颜色变化 */
    }
    .enlarged-image {
        max-width: 100%; /* 确保图片不会超出弹窗边界 */
        max-height: 100%; /* 确保图片不会超出弹窗边界 */
        border-radius: 0; /* 去掉图片的圆角 */
        transition: transform 0.3s ease; /* 变换过渡效果 */
    }
</style>
